<template>
  <CnBoldP class="mt-11 text-20">标准设置 -- {{ currentDevName }}</CnBoldP>
  <CnNormalP class="mt-6 mb-20 text-4xText">
    根据您的设置的合格标准，设备将根据您设置的标准检测水质，并判断是否异常
  </CnNormalP>
  <ProductFilesItem></ProductFilesItem>
  <div class="content_box">
    <!--  :loading="isItemCardLoading" -->
    <a-card class="content_item-card" v-for="(srl, index) in standRangeDataList" :key="index">
      <div class="title_box">
        <img :src="srl.imgUrl" alt="" style="width: 25px" />
        <span class="title_text">{{ srl.paramName }}</span>
        <div class="switch_box">
          <!-- <span class="content_lable_text" style="font-size: 14px; margin-right: 6px"
            >标准状态</span
          > -->
          <a-switch
            checked-children="开"
            un-checked-children="关"
            v-model:checked="srl.isOpen"
            @change="(e:any)=>{
              standRangeSwitchChange(e,srl)
            }"
          />
        </div>
      </div>
      <div class="item_content_box">
        <span class="content_lable_text">当前标准</span>
        <span class="content_value_text" v-if="srl.standRangeType == '两者之间'"
          >{{ srl.standRangeLeft }} - {{ srl.standRangeRight }}
          <span class="unit_text">{{ srl.paramUnit }}</span>
        </span>
        <span class="content_value_text" v-if="srl.standRangeType == '大于等于'">
          大于等于 {{ srl.standRangeBetween }}
          <span class="unit_text">{{ srl.paramUnit }}</span></span
        >
        <span class="content_value_text" v-if="srl.standRangeType == '小于等于'">
          小于等于 {{ srl.standRangeBetween }} <span class="unit_text">{{ srl.paramUnit }}</span>
        </span>
        <span class="content_value_text" v-if="srl.standRangeType == '未设置'">
          {{ srl.standRangeShowStr }} <span class="unit_text">{{ srl.paramUnit }}</span>
        </span>
      </div>
      <div class="item_footer_box">
        <div class="edit_util" @click="editStandRangeClick(srl)">
          <div class="img_box">
            <img
              style="width: 24px"
              src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/icon/edit-content.png"
              alt=""
            />
          </div>
          <span class="click_text">修改</span>
        </div>
        <div class="clear_util" @click="clearStandRangeClick(srl)">
          <div class="img_box">
            <img
              style="width: 24px"
              src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/icon/qingkong_icon.png"
              alt=""
            />
          </div>
          <span class="click_text"> 清空 </span>
        </div>
      </div>
    </a-card>

    <!-- 修改标准的弹窗 -->
    <!-- <a-modal
      v-model:visible="isShowEditStandRangeModal"
      :title="`修改标准合格标准(${currentEditParamName})`"
      style="top: 20px"
      @ok="handleOk"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal> -->
  </div>
  <a-modal
    v-model:visible="isShowEditStandRangeModal"
    :title="`修改标准合格标准(${currentEditParamName})`"
    @ok="editStandRangeModalOkClick"
    @cancel="editStandRangeModalCancelClick"
    style="width: 680px"
  >
    <div class="editStandRangeModal_content_box" style="padding: 40px 20px; display: flex">
      <span
        class="param_label"
        style="
          font-weight: 500;
          font-family: kaigengo-medium;
          font-size: 16px;
          margin-right: 14px;
          width: 110px;
          display: inline-block;
          text-align: right;
          line-height: 32px;
        "
        >{{ currentEditParamName }}:</span
      >
      <a-select
        ref="select"
        v-model:value="currentEditStandRange.standRangeType"
        style="width: 120px; margin-right: 20px"
      >
        <a-select-option value="两者之间">两者之间</a-select-option>
        <a-select-option value="大于等于">大于等于</a-select-option>
        <a-select-option value="小于等于">小于等于</a-select-option>
      </a-select>
      <div style="display: inline-block" v-if="currentEditStandRange.standRangeType == '两者之间'">
        <a-input-number
          v-model:value="currentEditStandRange.standRangeLeft"
          style="width: 120px"
        ></a-input-number>
        -
        <a-input-number
          v-model:value="currentEditStandRange.standRangeRight"
          style="width: 120px"
        ></a-input-number>
      </div>
      <a-input-number
        v-else
        v-model:value="currentEditStandRange.standRangeBetween"
        style="width: 120px"
      ></a-input-number>

      <span style="color: gray; display: inline-block; line-height: 32px; margin-left: 10px">{{
        currentEditParamUnit
      }}</span>
    </div>
  </a-modal>
</template>

<script lang="ts">
  import {defineComponent, ref, onMounted, createVNode} from 'vue'
  export default defineComponent({
    name: 'dataOverview'
  })
</script>
<script lang="ts" setup>
  // 引入
  import {ParamStandRangeType, ParamStandRangeListType} from './type.ts'
  import {
    selectStandRangeApi,
    editStandRangeApi,
    clearStandRangeApi,
    openStandRangeApi,
    closeStandRangeApi,
    isImageApi
  } from '@/api/standard.ts'
  import {Modal} from 'ant-design-vue'
  import {WarningTwoTone} from '@ant-design/icons-vue'
  import {ProductFilesItem} from '@/components/others/productFilesItem'
  import {CnNormalP, CnBoldP, CnMediumSpan} from '@/components/text'
  import useGlobalAPI from '@/hooks/useGlobalAPI'
  import {message} from 'ant-design-vue'
  const {route} = useGlobalAPI()

  // 标准开关的Change事件
  const standRangeSwitchChange = async (e: any, srl: ParamStandRangeType) => {
    console.log(e, srl)
    let devSRId = srl.devSRId
    /* e   true - 开     false - 关 */
    if (e) {
      await openStandRangeApi({devSRId: devSRId}).then(() => {
        getStandRangeDataFunc()
      })
    } else {
      await closeStandRangeApi({devSRId: devSRId}).then(() => {
        getStandRangeDataFunc()
      })
    }
  }

  // 清空标准的点击事件
  const clearStandRangeClick = (srl: ParamStandRangeType) => {
    // currentEditParamName.value = srl.paramName
    let paramName = srl.paramName
    let devSRId = srl.devSRId
    Modal.confirm({
      title: () => `确定要清空 ${paramName} 的合格标准吗?`,
      icon: () => createVNode(WarningTwoTone, {twoToneColor: '#ee4a4f'}),
      onOk: async () => {
        await clearStandRangeApi({devSRId: devSRId})
          .then(() => {
            getStandRangeDataFunc()
          })
          .catch(() => {})
      },
      onCancel: () => {}
    })
  }

  // 修改标准的弹窗的确定点击事件
  const editStandRangeModalOkClick = async () => {
    isShowEditStandRangeModal.value = false

    let standRangeStr = disposeStandRangeSubmitFunc()
    let data = {
      devSRId: currentEditDevSRId.value,
      standRange: standRangeStr
    }
    await editStandRangeApi(data)
      .then(() => {
        editSuccessShowDataDisposeFunc()
      })
      .catch(() => {})

    getStandRangeDataFunc()
  }

  // 修改成功处理回显数据的函数
  const editSuccessShowDataDisposeFunc = () => {
    standRangeDataList.value.forEach((item: ParamStandRangeType) => {
      if (item.devSRId == currentEditDevSRId.value) {
        item.standRangeType = currentEditStandRange.value.standRangeType
        switch (item.standRangeType) {
          case '两者之间':
            item.standRangeBetween = ''
            item.standRangeLeft = currentEditStandRange.value.standRangeLeft
            item.standRangeRight = currentEditStandRange.value.standRangeRight
            break
          case '大于等于':
            item.standRangeLeft = ''
            item.standRangeRight = ''
            item.standRangeBetween = currentEditStandRange.value.standRangeBetween
            break
          case '小于等于':
            item.standRangeLeft = ''
            item.standRangeRight = ''
            item.standRangeBetween = currentEditStandRange.value.standRangeBetween
            break
          default:
            break
        }
      }
    })
  }

  // 处理修改标准提交时的标准数据的函数
  const disposeStandRangeSubmitFunc = () => {
    let str = ''
    switch (currentEditStandRange.value.standRangeType) {
      case '两者之间':
        str =
          currentEditStandRange.value.standRangeLeft +
          '-' +
          currentEditStandRange.value.standRangeRight
        break
      case '大于等于':
        str = '>=' + currentEditStandRange.value.standRangeBetween
        break
      case '小于等于':
        str = '<=' + currentEditStandRange.value.standRangeBetween
        break

      default:
        break
    }
    return str
  }

  // 修改标准的弹窗的取消点击事件
  const editStandRangeModalCancelClick = () => {
    isShowEditStandRangeModal.value = false
  }

  // 点击修改标准的点击事件
  const editStandRangeClick = (srlItem: ParamStandRangeType) => {
    isShowEditStandRangeModal.value = true
    currentEditParamName.value = srlItem.paramName
    currentEditParamUnit.value = srlItem.paramUnit
    currentEditStandRange.value.standRangeType = srlItem.standRangeType
    currentEditStandRange.value.standRangeLeft = srlItem.standRangeLeft
    currentEditStandRange.value.standRangeRight = srlItem.standRangeRight
    currentEditStandRange.value.standRangeBetween = srlItem.standRangeBetween
    currentEditDevSRId.value = srlItem.devSRId

    console.log(currentEditStandRange.value)
  }

  // 获取标准数据的函数
  const getStandRangeDataFunc = async () => {
    isItemCardLoading.value = true
    const res = await selectStandRangeApi({devId: currentDevId.value})
    console.log(res)
    standRangeDataList.value = res.data
    disposeSwitchStatusFunc()
    disposeStandRangeDataTypeSegmentationFunc()
    console.log(standRangeDataList.value)
    iconDisposeFunc()
    isItemCardLoading.value = false
  }

  // 处理开关数据状态的函数
  const disposeSwitchStatusFunc = () => {
    standRangeDataList.value.forEach((item: ParamStandRangeType) => {
      switch (item.isOpen) {
        case 1:
          item.isOpen = true
          break
        case 0:
          item.isOpen = false
          break
        default:
          break
      }
    })
  }

  // 处理请求的标准数据类型分割的函数
  const disposeStandRangeDataTypeSegmentationFunc = () => {
    standRangeDataList.value.forEach((item: ParamStandRangeType) => {
      switch (estimateStandRangeTypeFunc(item.standRange)) {
        case '两者之间':
          item.standRangeType = '两者之间'
          item.standRangeLeft = item.standRange.split('-')[0]
          item.standRangeRight = item.standRange.split('-')[1]
          item.standRangeBetween = ''
          break
        case '大于等于':
          item.standRangeType = '大于等于'
          item.standRangeLeft = ''
          item.standRangeRight = ''
          item.standRangeBetween = item.standRange.split('>=')[1]
          break
        case '小于等于':
          item.standRangeType = '小于等于'
          item.standRangeLeft = ''
          item.standRangeRight = ''
          item.standRangeBetween = item.standRange.split('<=')[1]
          break
        case '未设置':
          item.standRangeType = '未设置'
          item.standRangeLeft = ''
          item.standRangeRight = ''
          item.standRangeBetween = ''
          item.standRangeShowStr = '--'
          break
        default:
          break
      }
    })
  }

  // 判断标准类型的函数
  const estimateStandRangeTypeFunc = (str: string) => {
    let typeStr = ''
    if (str == '' || str == null || str == undefined) {
      typeStr = '未设置'
    } else {
      if (str.indexOf('-') != -1) {
        typeStr = '两者之间'
      } else if (str.indexOf('>=') != -1) {
        typeStr = '大于等于'
      } else if (str.indexOf('<=') != -1) {
        typeStr = '小于等于'
      }
    }

    return typeStr
  }

  // 判断图标是否存在并且赋默认图标处理函数
  const iconDisposeFunc = () => {
    standRangeDataList.value.forEach(async (item: ParamStandRangeType) => {
      // const res = await isImageApi(item.paramName)
      // if (res != undefined) {
      // console.log('成功', 'res')
      // console.log(res)

      // }
      await isImageApi(item.paramName)
        .then(() => {
          console.log('存在')
          item.imgUrl = `https://d.lohand.com:1112/images/ConstantBlueCloud/params/${item.paramName}.png`
        })
        .catch(() => {
          console.log('不存在')
          item.imgUrl = `https://d.lohand.com:1112/images/ConstantBlueCloud/params/水滴.png`
        })
    })
  }

  /* 数据 ------------------------------------------------------- */

  // 是否显示修改标准的弹窗的标识
  const isShowEditStandRangeModal = ref(false)
  // 当前修改参数标准的参数名称
  const currentEditParamName = ref('')

  // 当前修改参数标准的 devSRId
  const currentEditDevSRId = ref(0)

  // 当前修改参数标准的单位
  const currentEditParamUnit = ref<string | undefined>('')

  // 当前修改的参数标准数据
  const currentEditStandRange = ref<{
    standRangeType: string | number | undefined
    standRangeLeft: string | number | undefined
    standRangeRight: string | number | undefined
    standRangeBetween: string | number | undefined
  }>({
    standRangeType: '',
    standRangeLeft: '',
    standRangeRight: '',
    standRangeBetween: ''
  })

  // 当前设备的devId
  const currentDevId = ref<string | number>('')

  // 当前设备的 devName
  const currentDevName = ref<string>('')

  // 参数标准列表数据
  const standRangeDataList = ref<ParamStandRangeListType>([])

  // 卡片的加载标识
  const isItemCardLoading = ref(false)

  // 初始化
  onMounted(() => {
    // 将路由传参传递的 devId 取出
    currentDevId.value = route.query.devId
    currentDevName.value = route.query.devName
    getStandRangeDataFunc()
  })
</script>

<style lang="less" scoped>
  ::v-deep .ant-card-body {
    padding: 14px 0px;
  }

  ::v-deep .ant-switch-checked {
    background-color: #1890ff !important;
  }

  ::v-deep .ant-switch {
    background-color: #bfbfbf;
  }

  .content_box {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: space-between;
    .content_item-card {
      transition: 0.3s;
      position: relative;
      width: 545px;
      height: 200px;
      margin: 0px 0px 20px 0px;
      border-radius: 5px;
      .title_box {
        display: flex;
        position: relative;
        padding: 6px 0px 3px 20px;
        font-size: 18px;
        letter-spacing: 2px;
        font-weight: bold;
        color: #324569;
        margin-bottom: 15px;
        background-image: url(https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/card-vein-inline.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .title_text {
          margin-left: 10px;
        }

        .switch_box {
          display: inline-block;
          position: absolute;
          right: 60px;
        }
      }

      .item_content_box {
        font-size: 17px;
        padding: 26px 20px 20px 30px;
        .content_lable_text {
          margin-right: 10px;
        }
        .content_value_text {
          color: rgb(140, 140, 140);
          font-family: kaigengo-regular;
          font-weight: 400 !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          white-space: nowrap !important;

          .unit_text {
            margin-left: 6px;
            font-size: 14px;
          }
        }
      }

      .item_footer_box {
        font-size: 16px;
        width: 100%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        display: flex;
        background-color: rgb(228, 234, 245);

        .edit_util,
        .clear_util {
          transition: 0.3s;
          cursor: pointer;
          line-height: 40px;
          text-align: center;
          width: 50%;
          // border-top-left-radius: 8px;
          // border-top-right-radius: 8px;
          color: #506eed;
          font-weight: 500 !important;
          font-family: kaigengo-medium !important;
          --tw-text-opacity: 1 !important;
          display: flex;
          // justify-content: ;
          padding-left: 20%;

          .img_box {
            cursor: pointer;
            // margin-right: 3px;
            padding-top: 7px;
            line-height: 40px;
            img {
              width: 24px !important;
              height: 24px !important;
            }
          }
          .click_text {
            padding-left: 3px;
            cursor: pointer;
          }
        }

        .edit_util:hover {
          background: rgba(33, 145, 252, 0.2);
        }
        .clear_util:hover {
          background: rgba(240, 2, 31, 0.2);
        }

        .edit_util {
          border-bottom-left-radius: 5px;
          // background-color: #2191fc;
          // border-right: 1px solid #293062;
        }
        .clear_util {
          border-bottom-right-radius: 5px;
          // background-color: #ee4a4f;
        }
      }
    }
    .content_item-card:hover {
      // transition: 2s;
      margin-top: -6px;
      // position: relative;
      // animation-duration: 2s;
      // top: -6px;
    }

    .content_lable_text {
      font-weight: 500 !important;
      font-family: kaigengo-medium !important;
      --tw-text-opacity: 1 !important;
      color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
    }

    .editStandRangeModal_content_box {
      display: flex;
      width: 1300px;
      padding: 40px 20px !important;

      .param_label {
        width: 200px;
      }
    }
  }

  // ::v-deep .ant-modal-body
</style>
